<template>
  <div class="goodsOrderList padding_20">
    <el-input v-model="param.orderNumber"
              placeholder="订单编号"
              class="w-200"
              @clear="handleQuery"
              clearable />
    <el-date-picker v-model="alltime"
                    type="daterange"
                    range-separator="至"
                    @change="handleQuery"
                    value-format='yyyy-MM-dd'
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
    </el-date-picker>
    <el-select v-model="param.orderStatus"
               class="w-200"
               placeholder="请选择订单状态"
               @change="handleQuery"
               clearable>
      <el-option :value="3"
                 label="待使用"></el-option>
      <el-option :value="4"
                 label="使用中"></el-option>
      <el-option :value="7"
                 label="已退款"></el-option>
      <el-option :value="8"
                 label="已结束"></el-option>
    </el-select>
    <el-select v-model="param.channelId"
               class="w-200"
               placeholder="请选择订单来源"
               @change="handleQuery"
               clearable>
      <el-option v-for="it in AllChannel"
                 :key="it.id"
                 :value="it.id"
                 :label="it.name"></el-option>
    </el-select>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-table :data="tableData"
              border
              style="width: 100%"
              class="mt-20">
      <!-- <el-table-column align="center" prop="name"  label="序号"></el-table-column> -->
      <el-table-column align="center"
                       prop="orderNumber"
                       label="订单编号"></el-table-column>
      <el-table-column align="center"
                       prop="money"
                       label="订单金额（元）"></el-table-column>
      <el-table-column align="center"
                       prop="applicableThrong"
                       label="订单时间">
        <template slot-scope="scope">
          {{commonFunction.timestampFormat(new Date(scope.row.createTime), 'yyyy-MM-dd hh:mm')}}
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="channelName"
                       label="订单来源"></el-table-column>
      <el-table-column align="center"
                       prop="sortNum"
                       label="购买账号">
        <template slot-scope="scope">
          {{scope.row.user.loginName}}
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="promoteAccount"
                       label="推销账号"></el-table-column>
      <!-- <el-table-column align="center" prop="detectAccount"  label="检测账号"></el-table-column> -->
      <el-table-column align="center"
                       prop="name"
                       label="订单商品"></el-table-column>
      <!-- <el-table-column align="center" prop="sortNum"  label="所属分类">
        <template slot-scope="scope">
            {{scope.row.healthRiskType.name}}
            {{scope.row.name}}
        </template>
      </el-table-column> -->
      <el-table-column align="center"
                       prop="sortNum"
                       label="订单状态">
        <template slot-scope="scope">
          {{scope.row.orderStatus == 3 ?'待使用':scope.row.orderStatus == 4?'使用中':scope.row.orderStatus == 7?'已退款':'已结束'}}
        </template>
      </el-table-column>

      <el-table-column align="center"
                       prop="option"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="info"
                     @click="handle(scope.row.id)">详 情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <infodialog v-if="showdialog"
                :dialogData='dialogData'
                @closedialog='showdialog=false;' />

  </div>
</template>

<script>

  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'
  import infodialog from './dialog'

  export default {
    name: "selfOrderList",
    data () {
      return {
        alltime: '',
        tableData: [],
        pageTotal: 0,       //总条数
        param: {
          detailName: '',
          startTime: '',
          endTime: '',
          type: 3
        },
        showdialog: false,
        dialogData: {

        },
        AllChannel: []
      }
    },
    created () {
      this.post(this.api.cooperationHospital.getAllChannel, {}).then((res) => {
        if (res.data.code === '200') {
          this.AllChannel = res.data.object;
          this.AllChannel.push({
            id: -1,
            name: '其他'
          })
        }
      });
      this._getList();
    },
    methods: {
      handle (id) {
        this.showdialog = true;
        this.dialogData = {
          show: true,
          info: id
        }
      },
      handleQuery () {
        if (this.alltime) {
          this.param.startTime = this.alltime[0];
          this.param.endTime = this.alltime[1];
        } else {
          this.param.startTime = null;
          this.param.endTime = null;
        }
        this.page.pageIndex=0
        this._getList();
      },

      _getList () {
        this.param.pageIndex = this.page.pageIndex;
        this.param.pageSize = this.page.pageSize;
        this.post(this.api.cooperationHospital.healthCheckOrderMange, this.param).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.object;
            this.pageTotal = res.data.totalNum;
          }
        });
      }
    },
    computed: {
      ...mapGetters([
        'page',
      ])
    },
    components: {
      Page, infodialog
    }
  }
</script>

<style lang="scss" scoped>
</style>
